﻿@model List<NavigatableNode>
@{
    var widget = (WidgetHelper)ViewData["widget"];
}
<div style="padding: 10px 0px;">
    @( 
 Ajax.Dna().Button()
            .ChangeType(ButtonTypes.LinkButton)
            .Name(widget.GenerateFieldID("btnAdd"))
            .LocText("RES_ADD")
            .Click("$('#" + widget.GenerateFieldID("editingitemdlg") + "').data('mode','new');$('#" + widget.GenerateFieldID("editingitemdlg") + "').dialog('open');")
            .ImageIcons(Url.Content("~/content/images/icon_add_16.png"))
            .GetHtml()
    )
</div>
@(
 Ajax.Dna().ListBox(widget.GenerateFieldID("itemeditinglist"))
 .Bind(Model)
 .ClientItemTemplate(@<text>
<li>
    <input type="hidden" value="${NavigateUrl}" />
    <a rel="${NavigateUrl}" href="javascript:void(0);" title="${Text}">
        <img src="@Url.Content("~/content/images/icon_link_16.png")" alt="${ToolTip}" class="d-icon" />
        {{if Text}} ${Text} {{else}} ${NavigateUrl} {{/if}} </a></li>
</text>)
        .Options(opts =>
        {
            opts.IsSortable = true;
            opts.OnPositionChanged = widget.GenerateFieldID("_submitChanged") + "();";
            opts.OnItemSelected = "$('#" + widget.GenerateFieldID("editingitemdlg") + "').data('mode','edit');" + "$('#" + widget.GenerateFieldID("editingitemdlg") + "').dialog('open');" + widget.GenerateFieldID("_bindDataToDlg") + "();";
        })
        .HtmlAttributes(new { style = "width:auto;" })
        .GetHtml())
@{Ajax.Dna().Dialog("Link editor")
        .Name(widget.GenerateFieldID("editingitemdlg"))
        .Options(opts =>
        {
            opts.AutoOpen = false;
            opts.IsResizable = false;
            opts.CssClass = "d-dialog";
            opts.OnOpen = widget.GenerateFieldID("_ondialogloaded") + "(this);";
            opts.ShowModal = true;
        })
.Body(@<text>
    <table style="background-color: #ffffff; width: 100%;" cellpadding="2" cellspacing="2">
        <tr>
            <td align="right" style="width: 80px;">
                @Html.Global("RES_TEXT"):
            </td>
            <td>
                @Ajax.Dna().TextBox(widget.GenerateFieldID("LinkText")).GetHtml()
            </td>
        </tr>
        <tr>
            <td align="right">
                Url:
            </td>
            <td>
                @Ajax.Dna().TextBox(widget.GenerateFieldID("LinkUrl")).GetHtml()
            </td>
        </tr>
        <tr>
            <td align="right">
                @Html.Global("RES_IMAGEURL"):
            </td>
            <td>
                @Ajax.Dna().TextBox(widget.GenerateFieldID("ImageUrl")).GetHtml()
            </td>
        </tr>
        <tr>
            <td align="right">
                @Html.Global("RES_TOOLTIP"):
            </td>
            <td>
                @Ajax.Dna().TextBox(widget.GenerateFieldID("LinkTip")).GetHtml()
            </td>
        </tr>
        <tr>
            <td align="right">
                @Html.Global("RES_TARGET"):
            </td>
            <td>
                @(
 Ajax.Dna().ComboBox(widget.GenerateFieldID("Target"))
                        .DropDownStyle(DropdownStyles.DropdownList)
                        .Width(150)
                        .Select("_self")
                        .Items(widgets =>
                        {
                            widgets.AddValue(Html.Global("RES_TARGET_BLANK"), "_blank");
                            widgets.AddValue(Html.Global("RES_TARGET_PARENT"), "_parent");
                            widgets.AddValue(Html.Global("RES_TARGET_SELF"), "_self");
                            widgets.AddValue(Html.Global("RES_TARGET_TOP"), "_top");
                        }).GetHtml()
                        )
            </td>
        </tr>
    </table>
    </text>)
.Buttons(btns =>
{
    btns.Add(Html.Global("RES_ADD"), widget.GenerateFieldID("_createLink") + "();$(this).dialog('close');");
    btns.Add(Html.Global("RES_SAVE"), widget.GenerateFieldID("_acceptChanged") + "();$(this).dialog('close');");
    btns.Add(Html.Global("RES_DELETE"), widget.GenerateFieldID("_deleteLink") + "();$(this).dialog('close');");
    btns.AddClose();
})
.Render();
}
@Html.Hidden(widget.GenerateFieldID("LinkList"), widget.GetString("LinkList"), new { id = widget.GenerateFieldID("LinkList") })
<script type="text/javascript">
   function @(widget.GenerateFieldID("_bindDataToDlg"))(){
      var _selectedLink=$('#@widget.GenerateFieldID("itemeditinglist")').listbox("option","selectedItem");
     var _dat=$.tmplItem(_selectedLink).data;
     $('#@widget.GenerateFieldID("LinkText")').val(_dat.Text);
     $('#@widget.GenerateFieldID("LinkUrl")').val(_dat.NavigateUrl);
     $('#@widget.GenerateFieldID("ImageUrl")').val(_dat.ImageUrl);
     $('#@widget.GenerateFieldID("LinkTip")').val(_dat.ToolTip);
     $('#@widget.GenerateFieldID("Target")').combo("option","selectedValue",_dat.Target?_dat.Target :"_self");
   }
   
   function @(widget.GenerateFieldID("_ondialogloaded"))(_dlg){
    var btns=$(".ui-dialog-buttonset>button",$(_dlg).parent());
     if ($(_dlg).data("mode")=="new") {
        $(".d-textbox>input",_dlg).val("");
        $('#@widget.GenerateFieldID("Target")').combo("option","selectedValue","_self");
    
     btns.each(function(i,n){
       if (i==0) $(n).show();
       if ((i==1) || (i==2))  $(n).hide();
     }); 
     
     }
     else
          btns.each(function(i,n){
              if (i==0) $(n).hide();
              if ((i==1) || (i==2))  $(n).show();
          }); 
   }

   function @(widget.GenerateFieldID("_submitChanged"))(){
     var linkArgs=[],linkElements=$('#@widget.GenerateFieldID("itemeditinglist")').find(".d-list-item");
     linkElements.each(function(i,n){
        linkArgs.push($.tmplItem(n).data);
     });
     $('#@widget.GenerateFieldID("LinkList")').val(JSON.stringify(linkArgs));
   }

   function @(widget.GenerateFieldID("_deleteLink"))(){
   var _selectedLink=$('#@widget.GenerateFieldID("itemeditinglist")').listbox("option","selectedItem");
      if (_selectedLink) $(_selectedLink).remove();
      @(widget.GenerateFieldID("_submitChanged"))();
   }
   
   function @(widget.GenerateFieldID("_createLink"))(){
     var _dat={},_linkInput=$('#@widget.GenerateFieldID("LinkUrl")');
     if (_linkInput.val()){
     _dat.Text=$('#@widget.GenerateFieldID("LinkText")').val();
     _dat.NavigateUrl=_linkInput.val();
     _dat.ToolTip=$('#@widget.GenerateFieldID("LinkTip")').val();
     _dat.ImageUrl=$('#@widget.GenerateFieldID("ImageUrl")').val();
      _dat.Target= $('#@widget.GenerateFieldID("Target")').combo("option","selectedValue");
      
      if (_dat.Target=="") _dat.Target="_self";
      var holder= $('#@widget.GenerateFieldID("itemeditinglist")').find(".d-list-items-holder");
      $('#@(widget.GenerateFieldID("itemeditinglist") + "_tmpl")').tmpl(_dat).appendTo(holder);
      $('#@widget.GenerateFieldID("itemeditinglist")').listbox("itemReset",$('#@widget.GenerateFieldID("itemeditinglist")').find("li:last"));
      @(widget.GenerateFieldID("_submitChanged"))();
      } else
         _linkInput.focus();
   }

   function @(widget.GenerateFieldID("_acceptChanged"))(){
      var _selectedLink=$('#@widget.GenerateFieldID("itemeditinglist")').listbox("option","selectedItem"),
      _linkelement=$.tmplItem(_selectedLink),
      _dat=_linkelement.data,_linkInput=$('#@widget.GenerateFieldID("LinkUrl")');
      if (_linkInput.val()){
     _dat.Text=$('#@widget.GenerateFieldID("LinkText")').val();
     _dat.NavigateUrl=_linkInput.val();
     _dat.ToolTip=$('#@widget.GenerateFieldID("LinkTip")').val();
     _dat.ImageUrl=$('#@widget.GenerateFieldID("ImageUrl")').val();
      _dat.Target= $('#@widget.GenerateFieldID("Target")').combo("option","selectedValue");
      if (_dat.Target=="") _dat.Target="_self";
      _linkelement.update();
      $('#@widget.GenerateFieldID("itemeditinglist")').listbox("itemReset",_linkelement.nodes[0]);
      @(widget.GenerateFieldID("_submitChanged"))();
      }
      else
      _linkInput.focus();
   }
</script>
@Html.StartupScripts()
